<template>
  <div inert>
    <a-modal v-model:open="openDialog" ok-text="保存" destroy-on-close centered :title="title" width="800px" @ok="submit">
      <div class="edit-role-box">
        <a-form ref="formRef" :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off">
          <a-form-item label-align="left" label="菜单名称" name="menuName" :rules="[{ required: true, message: '请输入菜单名称' }]">
            <a-input v-model:value="formState.menuName" autofocus placeholder="请输入" />
          </a-form-item>
          <a-form-item label-align="left" label="权限标识" name="perms" :rules="[{ required: true, message: '请输入权限标识' }]">
            <a-input v-model:value="formState.perms" autofocus placeholder="请输入" />
          </a-form-item>
          <a-form-item v-if="formState.type !== 'F'" label-align="left" label="路由地址" name="path" :rules="[{ required: true, message: '请输入路由地址' }]">
            <a-input v-model:value="formState.path" placeholder="请输入" />
          </a-form-item>
          <a-form-item v-if="formState.type === 'C'" label-align="left" label="组件路径" name="component" :rules="[{ required: true, message: '请输入组件路径' }]">
            <a-input v-model:value="formState.component" placeholder="请输入" />
          </a-form-item>
          <a-form-item v-if="formState.type !== 'F'" label-align="left" label="icon图标" name="iocn">
            <a-input v-model:value="formState.icon" placeholder="请输入" />
          </a-form-item>
          <a-form-item label-align="left" label="排序" name="sort">
            <a-input-number v-model:value="formState.sort" placeholder="请输入" style="width: 100%;" />
          </a-form-item>
          <a-form-item v-if="formState.type === 'C'" label-align="left" label="是否外链" name="iocn">
            <a-select v-model:value="formState.isFrame" :options="[{ label: '否', value: 0 }, { label: '是', value: 1 }]" />
          </a-form-item>
          <a-form-item label-align="left" label="备注" name="remark">
            <a-input v-model:value="formState.remark" placeholder="请输入" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
const emit = defineEmits(['flush'])

const title = ref('添加菜单') //

const openDialog = ref(false) //

const formState = reactive({
  id: undefined, // 菜单ID
  icon: null, // 菜单图标
  isFrame: 0, // 是否为外链（1是 0否）
  menuName: '', // 菜单名称
  component: '', // 组件路径
  parentId: '', // 父菜单ID
  path: '', // 路由地址
  perms: '', // 权限标识
  remark: '', // 备注
  sort: 0, // 显示顺序
  status: 0, // 菜单状态（0正常 1停用）
  type: '', // 菜单类型（M目录 C菜单 F按钮）
})
const formRef = ref(null) // 表单ref

async function submit() {
  await formRef.value.validate()
  httpRequest(`/admin/menu/${formState.id ? 'update' : 'add'}`, { ...formState }).then(() => {
    message.success(`${formState.id ? '编辑' : '添加'}成功`)
    openDialog.value = false
    emit('flush', formState.type)
  })
}

function open(data, type) {
  if (type === 'edit') {
    title.value = '编辑菜单'
    Object.keys(formState).forEach((key) => {
      if (data[key]) {
        formState[key] = data[key]
      }
    })
  }
  else {
    title.value = '添加菜单'
    if (data) {
      formState.parentId = data.id
      formState.path = `${data.path}/`
      formState.type = data.type === 'M' ? 'C' : 'F'
      formState.perms = `${data.perms}:`
    }
    else {
      formState.parentId = null
      formState.path = ''
      formState.type = 'M'
      formState.perms = ''
    }
    formState.id = undefined
    formState.menuName = ''
    formState.icon = null
    formState.remark = ''
    formState.component = ''
    formState.isFrame = 0
    formState.status = 0
    formState.sort = 0
  }
  openDialog.value = true
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.edit-role-box {
  width: 600px;
  padding-top: 30px;
}

.menu-tree {
  width: 100%;
  height: 40vh;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #f5f7f5;
}
</style>
